<template>
  <div class="top-header-one">
    <div class="top-bar">
      <div class="left">
        <slot name="left"></slot>
      </div>

      <div class="right">
        <slot name="right"></slot>
      </div>
    </div>
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";

@Component({
  name: "TopHeaderOne",
  components: {}
})
export default class TopHeaderOne extends Vue {}
</script>

<style lang="less" scoped>
.top-header-one {
  background: url("~@/assets/images/bg-2.png") center center no-repeat;
  background-size: cover;
  height: 145px;

  .top-bar {
    height: 44px;
    padding-right: 12px;
    display: flex;
    justify-content: space-between;
    color: white;
    position: relative;

    .left {
      display: flex;
      height: 100%;
      justify-content: start;
      align-items: center;
      padding-left: 8px;
      padding-right: 12px;
    }

    .iconshouqi {
      display: block;
      transform: rotate(90deg);
    }

    .right {
      display: flex;
      align-items: center;
    }
  }
}
</style>
